<template>
    <el-container class="outer">
        <el-aside class="aside">
            <!-- 侧边框 @open="handleOpen" @close="handleClose"-->
            <el-menu active-text-color="#ffd04b" background-color="#545c64" class="el-menu-vertical-demo"
                default-active="/main/ear" text-color="#fff" :router="true">

                <el-menu-item index="/main/ear">
                    <template #title>
                        <el-icon>
                            <HomeFilled />
                        </el-icon>
                        <span>主页</span>
                    </template>
                </el-menu-item>
                <el-sub-menu index="'m' ">
                    <template #title>
                        <el-icon><Comment /></el-icon>
                        <span>订单管理</span>
                    </template>
                    <el-menu-item index="/main/dingdan">
                        <template #title>
                            <el-icon><Document /></el-icon>
                        <span>订单列表</span>
                    </template>
                    </el-menu-item>
                    <el-menu-item index="/main/show">
                        <template #title>
                            <el-icon><Coin /></el-icon>
                        <span>数据统计</span>
                    </template>
                    </el-menu-item>
                </el-sub-menu>
                <el-sub-menu index="'z' ">
                    <template #title>
                        <el-icon>
                            <Shop />
                        </el-icon>
                        <span>商品管理</span>
                    </template>
                    <el-menu-item index="/main/shangpin">
                        <template #title>
                            <el-icon>
                                <Notebook />
                            </el-icon>
                            <span>商品列表</span>
                        </template></el-menu-item>
                    <el-menu-item index="/main/fenlei"><template #title>
                            <el-icon>
                                <KnifeFork />
                            </el-icon>
                            <span>分类列表</span>
                        </template></el-menu-item>
                </el-sub-menu>
                <el-sub-menu index="'m9' ">
                    <template #title>
                        <el-icon>
                            <Avatar />
                        </el-icon>
                        <span>会员管理</span>
                    </template>
                    <el-menu-item index="/main/user"><template #title>
                            <el-icon>
                                <UserFilled />
                            </el-icon>
                            <span>会员列表</span>
                        </template></el-menu-item>
                </el-sub-menu>
                <el-sub-menu index="'m8' ">
                    <template #title>
                        <el-icon>
                            <Tools />
                        </el-icon>
                        <span>管理员管理</span>
                    </template>
                    <el-menu-item index="/main/admin">
                        <template #title>
                            <el-icon>
                                <Stamp />
                            </el-icon>
                            <span>管理员列表</span>
                        </template></el-menu-item>
                </el-sub-menu>



            </el-menu>
        </el-aside>
        <el-container >
            <!-- 头部 -->
            <el-header class="header">
                <div class="logo"></div>
            <div class="title">
                <h1>悠享商城系统</h1>
            </div>
            <div class="session">
                <el-menu background-color="#f3f8fe" @select="userMenuSelect">
                    <el-sub-menu index="user">
                        <template #title>
                            <el-icon>
                            <Stamp />
                        </el-icon>
                          {{ usernamea.username }}
                        </template>
                        <el-menu-item  @click="editinfo">修改信息</el-menu-item>
                        <el-menu-item @click="editinfo">重置密码</el-menu-item>
                        <el-menu-item index="logout" @click="userMenuSelect">退出</el-menu-item>
                    </el-sub-menu>
                </el-menu>
            </div>
            </el-header>
            <!-- 主体 -->
            <el-main class="main">
                <router-view></router-view>
            </el-main>
        </el-container>
    </el-container>

</template>
<script setup>
import { useRouter } from 'vue-router';
import { ref } from 'vue';
import { Stamp, UserFilled, Avatar, HomeFilled, Tools, Shop, Notebook ,Comment,KnifeFork,Document,Coin} from '@element-plus/icons-vue';
import { clear } from '../api/jwtApi';
let usernamea=ref({
username:sessionStorage.getItem("username")
});
const router=useRouter();
//点击用户菜单时触发
function userMenuSelect(menu) {
if (menu === "logout") {//退出
    //console.log(lo);
     clear();
    // //location.href = "/index";
    router.push("/login");
}
}
function editinfo(){
alert('请稍后重试');
}
</script>
<style scoped>
.outer {
height: 100%;

}

.aside {

width: 200px;
background-color: #545c64;

}

.left {
width: 100%-200px;
height: 100%;
}

.header {
background-color: #f3f8fe;
border-bottom: 1px solid #ccc;
height: 70px;
padding-left: 5px;
}

.main {
/* height: 100%-70px; */
background-color: rgb(255, 255, 255);
}
.header {
background-color: #f3f8fe;
border-bottom: 1px solid #ccc;
display: flex;
flex-direction: row;
padding-left: 5px;
height: 70px;
}

.header>.title {
flex-grow: 1;

}

.header>.title>h1 {
font-size: 24px;
margin: 15px 0;
}

.header>.logo {
width: 120px;
flex-shrink: 0;
margin-left: 5px;
box-sizing: border-box;
padding: 10px;
background: url("@/assets/logo.jpg") no-repeat center center/contain;
}

.header>.session {
width: 150px;
flex-shrink: 0;
z-index: 999;

}
</style>